<template>
  <div class="list">
    <div class="classify_content">
      <div class="line_content">
        <div class="classify_item" @click="toRecommend(item)" v-for="item in navigations" :key="item.id">
          <div class="classify_item_image">
            <image :src="item.logo" style="width:96px;height:96px"></image>
          </div>
          <div class="item_tittle_content"><text class="classify_item_tittle">{{item.name}}</text></div>
        </div>
      </div>
    </div>
  </div>
  <!--	<div class="videoBox">-->
  <!--		<image style="width:750px;height:500px" src="http://hulupai.oss-cn-hangzhou.aliyuncs.com/upload/20210121/videobackground.jpg"/>-->
  <!--		<video class="video" controls="true" auto-play="true" src="http://hulupai.oss-cn-hangzhou.aliyuncs.com/upload/20210119/1b404e5b0678e9b662a9ff021496aaf6.mp4"/>-->
  <!--	</div>-->
</template>
<script>
const eeui = app.requireModule('eeui');
import {
  list as navigationList
} from '../../../../api/navigation'
export default {
  name: '',
  data() {
    return {
      tagIds: [],
      navigations: [],

    }
  },
  props: [
    'content'
  ],
  created() { // 在实例创建完成后被立即调用
    this.loadNavigation()
  },
  methods: {
    loadNavigation() {
      this.navigations=[]
      if (this.content.tagids != null) {
        this.tagIds = this.content.tagids.split(',');
        for (var i = 0; i < this.tagIds.length; i++) {
          this.tagIds[i] = parseInt(this.tagIds[i])
        }
      }
      navigationList({
        mchId: this.getGlobalData().mchId,
        tagIds: this.tagIds,
      }).then(res => {
        for(var i=0;i<res.data.data.length;i++){
          this.thumbnail(res.data.data[i].logo,96, 96)
        }

        if(res.data.data.length>4){
          for(var k=0;k<4;k++){
            this.navigations.push(res.data.data[k])
          }
        }else{
          this.navigations=res.data.data
        }
      })
    },
    toRecommend(e) {
      if (e.orders ==  10){
        eeui.openWeb(e.url);
      }
      if (e.type == 1) {
        eeui.openPage({
              url: 'root://pages/goods/category/category.js',
              params:e.typeId,
              statusBarType: 'immersion',
              statusBarStyle:false
            },

        );
      }
      if (e.type == 2) {
        eeui.openPage({
          url: 'root://pages/index/wxPage/wxPage.js',
          params: e.typeId,
          statusBarType: 'immersion',
          statusBarStyle:false
        })
      }
      if (e.type == 3) {
        eeui.openPage({
              url: 'root://pages/goods/product/details.js',
              params:e.typeId,
              statusBarType: 'immersion',
              statusBarStyle:false
            },

        );
      }
      if (e.type == 12) {
        eeui.openPage({
          pageType: 'web',
          url: e.path,
          statusBarType: 'immersion',
          statusBarStyle:false
        })
      }



    },
  },
  components: {},
}
</script>

<style scoped>
.videoBox{
  width:750px;
  height:500px;
}

.video {
  position:absolute;
  top: 0px;
  left: 20px;
  width:710px;
  height:450px;
}
.list {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}

.classify_content {
  display: flex;
  width: 710px;
  padding-top: 30px;
  border-radius: 16px;
  flex-direction: column;
  /* background-color: white; */
}

.classify_item {
  display: flex;
  flex-direction: column;
  width: 142px;
  align-items: center;
  margin-bottom: 37px;
}

.classify_item_image {
  width: 96px;
  height: 96px;
}

.item_tittle_content {
  margin-top: 15px;
  width: 96px;
  height: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  lines: 0;
}

.classify_item_tittle {
  text-align: center;
  width: 100px;
  font-size: 24px;
  height: 24.5px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
}

.line_content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;

}

.line_content_under {
  display: flex;
  flex-direction: row;
  margin-top: 37px;
}
</style>
